<template>
  <div>
    <h2>学生管理</h2>
    <form @submit.prevent="filter">
      <input v-model="filterForm.name" placeholder="姓名" />
      <input v-model="filterForm.studentNumber" placeholder="学号" />
      <input v-model="filterForm.major" placeholder="专业" />
      <input v-model="filterForm.grade" placeholder="年级" />
      <input v-model="filterForm.department" placeholder="院系" />
      <select v-model="filterForm.status">
        <option value="">全部</option>
        <option value="1">在读</option>
        <option value="2">毕业</option>
        <option value="3">休学</option>
      </select>
      <button type="submit">筛选</button>
      <button type="button" @click="reset">重置</button>
    </form>
    <button @click="showAdd = true">添加学生</button>
    <StudentTable
      :students="students"
      @edit="editStudent"
      @delete="deleteStudent"
    />
    <!-- 添加/编辑弹窗略 -->
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getStudents, addStudent, updateStudent, deleteStudent as delStudent } from '../api/student';
import StudentTable from '../components/StudentTable.vue';

const students = ref([]);
const filterForm = ref({
  name: '', studentNumber: '', major: '', grade: '', department: '', status: ''
});
const showAdd = ref(false);

function filter() {
  getStudents(filterForm.value).then(res => {
    students.value = res.data;
  });
}
function reset() {
  filterForm.value = { name: '', studentNumber: '', major: '', grade: '', department: '', status: '' };
  filter();
}
function editStudent(student) { /* 可弹窗编辑 */ }
function deleteStudent(id) {
  delStudent(id).then(() => filter());
}
onMounted(filter);
</script> 